<template>
  <div>
    <common-breadcrumb :crumb="crumb"></common-breadcrumb>
    <el-card>
      <el-form
        :model="addApiForm"
        :rules="addApiFormRules"
        ref="addApiFormRef"
        label-width="100px"
      >
        <el-form-item label="项目名称" prop="projectId">
          <el-select v-model="addApiForm.projectId" placeholder="请选择项目名称">
            <el-option
              v-for="item in projectList" :key="item.id"
              :label="item.project_name"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="api描述" prop="apiDesc">
          <el-input v-model="addApiForm.apiDesc"></el-input>
        </el-form-item>
        <el-form-item label="请求路径" prop="url">
          <el-input v-model="addApiForm.url"></el-input>
        </el-form-item>
        <el-form-item label="请求方法" prop="requestMethod">
          <el-select v-model="addApiForm.requestMethod" placeholder="请选择请求方法">
            <el-option label="GET" value="GET"></el-option>
            <el-option label="POST" value="POST"></el-option>
            <el-option label="PUT" value="PUT"></el-option>
            <el-option label="DELETE" value="DELETE"></el-option>
            <el-option label="PATCH" value="PATCH"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请求参数">
          <el-button type="primary" size="mini" @click="addParamsDialog">添加参数</el-button>
        </el-form-item>
        <!-- 参数列表 -->
        <el-form-item>
          <el-table
            v-if="addApiForm.requestParams.length"
            border
            stripe
            :data="addApiForm.requestParams">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="参数名" prop="paramsName"></el-table-column>
            <el-table-column label="参数名" prop="paramsDesc"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="deleteParams(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
         </el-form-item>
        <el-form-item label="返回示例" prop="reponseJson">
          <el-input
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 20 }"
            v-model="addApiForm.reponseJson"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 10}"
            v-model="addApiForm.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="addBtn">添加</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 弹框添加参数 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      @close="closeDialog"
      width="50%">
      <el-form
        :model="requestParamsForm"
        :rules="requestFormRule"
        ref="requestParamsFormRef"
      >
        <el-form-item label="参数" label-width="80px" prop="paramsName">
          <el-input v-model="requestParamsForm.paramsName"></el-input>
        </el-form-item>
        <el-form-item label="参数说明" label-width="80px" prop="paramsDesc">
          <el-input v-model="requestParamsForm.paramsDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRequestParams">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import commonBreadcrumb from '../../components/common/Breadcrumb'
export default {
  data () {
    return {
      crumb: ['管理', '添加api'],
      projectList: [],
      addApiForm: {
        projectId: '',
        requestMethod: '',
        apiDesc: '',
        apiAuthor: '',
        url: '',
        requestParams: [],
        reponseJson: '',
        remark: ''
      },
      requestParamsForm: {
        paramsName: '',
        paramsDesc: ''
      },
      // 表单验证
      addApiFormRules: {
        url: [
          { required: true, message: '请求地址必填', trigger: 'blur' },
          { max: 256, message: '不能超过256个字符', trigger: 'blur' }
        ],
        apiDesc: [
          { required: true, message: '描述不能为空', trigger: 'blur' },
          { max: 256, message: '不能超过256个字符', trigger: 'blur' }
        ],
        reponseJson: [
          { max: 8000, message: '不能超过8000个字符', trigger: 'blur' }
        ],
        remark: [
          { max: 256, message: '不能超过256个字符', trigger: 'blur' }
        ],
        projectId: [
          { required: true, message: '项目名称必选', trigger: 'change' }
        ],
        requestMethod: [
          { required: true, message: '请求方式必选', trigger: 'change' }
        ]
      },
      // 添加参数表单验证
      requestFormRule: {
        paramsName: [
          { required: true, message: '参数名为必填字段', trigger: 'blur' },
          { max: 256, message: '参数名不能超过256个字符', trigger: 'blur' }
        ],
        paramsDesc: [
          { required: true, message: '参数说明为必填字段', trigger: 'blur' },
          { max: 256, message: '参数说明不能超过256个字符', trigger: 'blur' }
        ]
      },
      dialogVisible: false
    }
  },
  components: {
    commonBreadcrumb
  },
  created () {
    this.getProject()
    this.getLoginUser()
  },
  methods: {
    // 获取项目名称
    async getProject () {
      const { data: res } = await this.$axios.get('allprojects')
      this.projectList = res.result
    },
    // 获取当前登录账号
    getLoginUser () {
      this.addApiForm.apiAuthor = window.sessionStorage.getItem('username')
    },
    addParamsDialog () {
      this.dialogVisible = true
    },
    addRequestParams () {
      this.$refs.requestParamsFormRef.validate(valid => {
        if (valid) {
          this.addApiForm.requestParams.push({
            paramsName: this.requestParamsForm.paramsName,
            paramsDesc: this.requestParamsForm.paramsDesc
          })
          this.dialogVisible = false
        }
      })
    },
    closeDialog () {
      this.$refs.requestParamsFormRef.resetFields()
    },
    // 删除请求参数
    deleteParams (idx) {
      this.addApiForm.requestParams.splice(idx, 1)
    },
    // 添加接口
    addBtn () {
      this.$refs.addApiFormRef.validate(async valid => {
        if (valid) {
          const { data: res } = await this.$axios.post('api', this.addApiForm)
          if (res.code === 1) {
            this.$message.success('添加成功')
            return false
          }
          this.$message.error('添加失败')
        }
      })
    }
  }
}
</script>
